<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01.Vue中时间修饰符使用</title>
    <style>
        .aa{
            background: red;
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
<div id="app">

    <!--只触发标签自身的事件-->
    <div class="aa" @click.self="divClick">

        <!--用来阻止事件冒泡-->
        <input type="button" value="按钮" @click.stop="btnClick">


        <input type="button" value="按钮1" @click="btnClick1">


    </div>


    <hr>

        <!--
        .prevent : 用来阻止事件的默认行为
        .once    : 用来只执行一次特定的事件
        -->
    <a href="http://www.baizhibest.com/" @click.prevent.once="aClick">百知教育</a>

</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {},
        methods: {
            btnClick(){
                alert('button被点击了');
            },
            divClick(){
                alert('div被点击了');
            },
            aClick(){
                alert('a被点击了');
            },
            btnClick1(){
                alert('btn1被点击了');
            }
        }
    });
</script>
</body>
</html>